<template>
  <div>
    <!-- 

      废弃页面

     -->
    <m-shelf title="修改密码">
      <div slot="content">
        <div class="content-box">
          <div class="info-box">
            <el-form :model="changePassForm" :rules="changePassRules" ref="changePassForm">
              <el-form-item prop="password">
                <el-input placeholder="密码" type="password" v-model="changePassForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="rePassword">
                <el-input placeholder="重复密码" type="password" v-model="changePassForm.rePassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="newPassword">
                <el-input placeholder="新密码" type="password" v-model="changePassForm.newPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="submitForm()">确认修改</el-button>
              </el-form-item>
            </el-form>
          </div>
          
        </div>
      </div>
    </m-shelf>
  </div>
</template>

<script>
import MShelf from '../../../components/shelf.vue'

import { mapState, mapMutations } from 'vuex'
import { changePassword } from '../../../api/user'

export default {
  name: 'changePass',
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.RegisterForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      changePassForm: {
        password: null,
        rePassword: null,
        newPassword: null
      },
      // 修改密码表单验证规则
      changePassRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        rePassword: [
          { validator: validatePass2, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    console.log(this.userInfo.username, this.userInfo.id)
  },
  methods: {
    async submitForm() {

    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  components: {
    MShelf
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/mixin";

.el-form{
  .el-input{
    width: 500px;
    margin-top: 21px;
  }
}

.content-box {
  height: 600px;
  display: flex;
  margin: 0 30px 0px;
  border-bottom: #dadada solid 1px;
  line-height: 30px;
  display: flex;
  align-items: center;
  &:hover {
    .r-box {
      display: block;
    }
  }
  &:nth-of-type(6) {
    margin: 0 30px 30px;
  }
  .info-box {
    display: flex;
    width: 928px;
    margin-left: 5px;
    border-radius: 5px;
    overflow: hidden;
    .tital {
      display: flex;
      width: 76px;
      justify-content: space-between;
    }
  }
  .r-box {
    margin-left: 570px;
    display: none;
  }
  h3 {
    font-size: 19px;
    font-weight: 400;
    color: #333;
  }
}

</style>